<template>
    <app-layout :haveBackground="false">
        <view class="banner">
            <image :src="banner"></image>
            <view class="rule" @click="toRule">活动规则</view>
        </view>
        <view class="search-area main-center cross-center">
            <view @click="toSearch" class="search dir-left cross-center">
                <image src="./../image/big-sarch.png"></image>
                <view>请输入商品名称搜索</view>
            </view>
            <view class="list-style main-center cross-center">
                <image @click="style = 2" v-if="style == 1" src="./../image/list.png"></image>
                <image @click="style = 1" v-if="style == 2" src="./../image/pinterest.png"></image>
            </view>
        </view>
        <view :class="style == 1 ? 'goods-style-one dir-left-wrap' : 'goods-style-two dir-top-wrap'">
            <view @click="toDetail(item)" v-for="(item,index) in list" :key="item.id" class="goods" :class="style == 1 ? 'dir-top-nowrap' : ''">
                <image class="goods-pic" :src="item.cover_pic"></image>
                <view class="goods-item box-grow-1">
                    <view class="goods-name t-omit-two">{{item.name}}</view>
                    <view class="goods-info main-between cross-center">
                        <view class="goods-sale">{{item.sales}}</view>
                        <view class="goods-vip" v-if="item.vip_card_appoint && item.vip_card_appoint.discount && item.vip_card_appoint.discount != 0">
                            <image src="./../image/svip.png"></image>
                            <view>{{item.vip_card_appoint.discount}}折</view>
                        </view>
                    </view>
                    <view class="goods-bottom main-between" :class="style == 2 ? 'cross-bottom' : 'cross-center'">
                        <view class="goods-price" :class="style == 2 ? 'dir-left-wrap cross-bottom' : ''">
                            <view :style="{'color':getTheme.color}" :class="{'small-price' : item.level_show == 1}" style="font-size: 36rpx;" v-if="item.price_content == '免费'">{{item.price_content}}</view>
                            <view :style="{'color':getTheme.color}" :class="{'small-price' : item.level_show == 1}" v-else><text>￥</text>{{item.integer}}<text>{{item.float}}</text></view>
                            <view :style="{'color':getTheme.color,'background-color': getTheme.background_o}" v-if="item.level_show == 1" class="goods-member-price">会员价{{item.level_price == 0 ? ' 免费': '￥' + item.level_price}}</view>
                        </view>
                        <view :style="{'background-color': getTheme.background}" class="goods-buy-btn">购买</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="no-list" v-if="!loading && list.length === 0">
            <app-no-goods background="#f7f7f7"></app-no-goods>
        </view>
    </app-layout>
</template>

<script>
    import { mapState,mapGetters } from "vuex";
    import appNoGoods from '../../../components/page-component/app-no-goods/app-no-goods.vue';

    export default {
        data() {
            return {
                style: 1,
                list: [],
                more: false,
                loading: false,
                first: false,
                page: 1,
                activityBg: '',
                banner: '',
                activeIndex: 0
            }
        },
        components: {appNoGoods},
        computed: {
            ...mapState({
                userInfo: state => state.user.info,
            }),
            ...mapGetters('mallConfig', {
                getTheme: 'getTheme',
            }),
        },
        onReachBottom() {
            if(this.more) {
                this.getMore();
            }
        },
        methods: {
            toRule() {
                uni.navigateTo({
                    url: `/pages/rules/index?url=${encodeURIComponent(this.$api.weekly_buy.config)}&key=rule`,
                });
            },
            toSearch() {
                let url = '/pages/search/search?sign=weekly_buy';
                uni.navigateTo({
                    url: url
                });
            },
            toDetail(item) {
                uni.navigateTo({
                    url: '/plugins/weekly_buy/goods/goods?goods_id=' + item.id
                });
            },
            handlePrice(list) {
                for(let item of list) {
                    let index = item.price.indexOf('.');
                    item.integer = item.price.slice(0,index);
                    item.float = item.price.slice(index);
                    if(item.price > 10000) {
                        let integer = +(item.integer.slice(0,item.integer.length- 4)+'.'+item.integer.slice(item.integer.length- 4))
                        integer = integer.toFixed(2)
                        index = integer.indexOf('.');
                        item.integer = integer.slice(0,index);
                        item.float = integer.slice(index) + 'w';
                    }
                    if(item.level_price > 10000) {
                        let level_price = item.level_price.toFixed(2);
                        level_price = level_price.slice(0,-3);
                        level_price = +(level_price.slice(0,level_price.length- 4)+'.'+level_price.slice(level_price.length- 4))
                        item.level_price = level_price.toFixed(2) + 'w'
                    }
                }
                return list
            },
            getMore() {
                this.more = false;
                this.loading = true;
                uni.showLoading({
                    mask: true,
                    title: '加载更多...'
                });
                this.$request({
                    url: this.$api.weekly_buy.index,
                    data: {
                        page: this.page
                    }
                }).then(response=>{
                    this.$hideLoading();
                    uni.hideLoading();
                    if(response.code === 0) {
                        this.list = this.list.concat(response.data.list);
                        this.list = this.handlePrice(this.list)
                        this.loading = false;
                        if(response.data.list.length == response.data.pagination.pageSize) {
                            this.more = true;
                            this.page++;
                        }
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(() => {
                    this.$hideLoading();
                });
            },
            getList() {
                this.more = false;
                this.loading = true;
                this.list = [];
                this.$request({
                    url: this.$api.weekly_buy.index,
                }).then(response=>{
                    this.first = false;
                    this.$hideLoading();
                    uni.hideLoading();
                    if(response.code === 0) {
                        this.list = response.data.list;
                        this.list = this.handlePrice(this.list)
                        this.banner = response.data.banner;
                        this.loading = false;
                        this.$forceUpdate();
                        if(this.list.length == response.data.pagination.pageSize) {
                            this.more = true;
                            this.page++;
                        }
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(() => {
                    this.$hideLoading();
                });
            },
        },

        // #ifdef MP
        onShareAppMessage() {
            return this.$shareAppMessage({
                path: '/plugins/weekly_buy/index/index',
                title: this.$children[0].navigationBarTitle,
            });
        },
        // #endif
        // #ifdef MP-WEIXIN
        onShareTimeline() {
            return this.$shareTimeline({
                title: this.$children[0].navigationBarTitle,
                query: {
                }
            });
        },
        // #endif
        onLoad(option) { this.$commonLoad.onload(option);
            let that = this;
            // #ifdef MP-WEIXIN
            wx.showShareMenu({
                menus: ['shareAppMessage', 'shareTimeline']
            })
            // #endif
            that.$showLoading({
                type: 'global',
                text: '加载中...'
            });
            that.first = true;
            that.getList();
        }
    }
</script>

<style scoped lang="scss">
    .rule {
        position: absolute;
        top: 0;
        right: 0;
        width: 132rpx;
        height: 44rpx;
        text-align: center;
        line-height: 44rpx;
        border-radius: 22rpx 0 0 22rpx;
        background-color: rgba(0,0,0,.7);
        color: #fff;
        font-size: 24rpx;
        z-index: 10;
    }
    .banner {
        position: relative;
        width: 100%;
        height: 274rpx;
        padding: 24rpx;
        border-radius: 16rpx;
        image {
            width: 702rpx;
            height: 226rpx;
            border-radius: 16rpx;
        }
    }
    .no-list {
        position: absolute;
        top: #{348rpx};
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 50;
        background-color: #f7f7f7;
    }
    .search-area {
        margin-top: 3rpx;
        padding-left: 24rpx;
        height: 70rpx;
        line-height: 70rpx;
        .search {
            width: 638rpx;
            height: 100%;
            background-color: #fff;
            border-radius: 35rpx;
            font-size: 28rpx;
            color: #999999;
            padding-left: 33rpx;
            image {
                width: 40rpx;
                height: 40rpx;
                margin-right: 8rpx;
            }
        }
        .list-style {
            width: 88rpx;
            height: 70rpx;
            image {
                width: 40rpx;
                height: 40rpx;
            }
        }
    }
    .goods-name {
        font-size: 28rpx;
        color: #333333;
        margin: 0 16rpx;
    }
    .goods-info {
        width: 100%;
        padding: 16rpx;
        font-size: 22rpx;
        color: #999999;
        .goods-vip {
            width: 130rpx;
            height: 32rpx;
            position: relative;
            font-weight: 600;
            image {
                width: 100%;
                height: 100%;
            }
            view {
                font-size: 20rpx;
                color: #171718;
                height: 32rpx;
                line-height: 32rpx;
                position: absolute;
                right: 8rpx;
                top: 0;
                z-index: 2;
            }
        }
    }
    .goods-bottom {
        width: 100%;
        padding: 16rpx;
        height: 74rpx;
        .goods-price {
            font-family: Alibaba;
            font-size: 40rpx;
            color: #FF4544;
            font-weight: 500;
            .small-price {
                height: 35rpx;
                line-height: 1;
            }
            .goods-member-price {
                font-size: 20rpx;
                height: 28rpx;
                line-height: 28rpx;
                padding: 0 10rpx;
                background-color: rgba(255, 69, 68, 0.1);
                margin-top: -3rpx;
                border-radius: 4rpx;
                display: inline-block;
            }
            text {
                font-size: 28rpx;
            }
        }
        .goods-buy-btn {
            height: 48rpx;
            width: 102rpx;
            border-radius: 4rpx;
            background-color: #ff4544;
            color: #fff;
            font-size: 28rpx;
            text-align: center;
            line-height: 48rpx;
        }
    }
    .goods-style-one {
        padding-top: 19rpx;
        .goods {
            margin: 10rpx 11rpx;
            width: 340rpx;
            .goods-pic {
                width: 340rpx;
                height: 366rpx;
                border-top-left-radius: 16rpx;
                border-top-right-radius: 16rpx;
                display: block;
            }
            .goods-item {
                background-color: #fff;
                border-bottom-left-radius: 16rpx;
                border-bottom-right-radius: 16rpx;
                padding: 20rpx 0;
                .goods-name {
                    /* #ifndef MP-ALIPAY */
                    height: #{76rpx};
                    /* #endif */
                    /* #ifdef MP-ALIPAY */
                    height: #{64rpx};
                    /* #endif */
                }
            }
        }
    }
    .goods-style-two {
        .goods {
            width: 702rpx;
            height: 240rpx;
            border-radius: 16rpx;
            background-color: #fff;
            padding: 20rpx;
            margin: 20rpx 24rpx 0;
            position: relative;
            padding-left: 240rpx;
            .goods-pic {
                position: absolute;
                top: 20rpx;
                left: 20rpx;
                width: 200rpx;
                height: 200rpx;
                border-radius: 16rpx;
            }
            .goods-bottom {
                position: absolute;
                left: 0;
                bottom: 20rpx;
                padding: 0 16rpx;
                padding-left: 240rpx;
                z-index: 2;
                .goods-price {
                    height: 100%;
                    .small-price {
                        height: auto;
                    }
                    .goods-member-price {
                        margin-left: 10rpx;
                    }
                }
            }
            .goods-name {
                margin: 0;
            }
            .goods-info {
                padding: 20rpx 0;
            }
        }
    }
</style>